<template>
    <div class :key = "$route.fullPath">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 部门调度
                </el-breadcrumb-item>
                <el-breadcrumb-item>员工部门调度详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-tabs v-model="activeName">
                <!--调度信息录入-->
                <el-tab-pane :label="`调度信息录入`" name="first" v-bind:disabled="isDisabled1">
                    <div>
                        <el-form
                            :inline="true"
                            ref="form"
                            :model="form"
                            label-width="100px"
                            :rules="rules"
                        >
                            <el-form-item label="员工编号" class="elformitemmargin">
                                <el-input v-model="form.empId" class="inputwidth" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="员工姓名" class="elformitemmargin">
                                <el-input v-model="empName" class="inputwidth" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="原部门id" class="elformitemmargin">
                                <el-input
                                    v-model="form.preDeptId"
                                    class="inputwidth"
                                    :disabled="true"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="原部门名称" class="elformitemmargin">
                                <el-input v-model="preDeptName" class="inputwidth" :disabled="true"></el-input>
                            </el-form-item>

                            <br />
                        </el-form>

                        <span slot="footer" class="dialog-footer">
                            <el-button type="primary" style="width:100px" @click="next1('form')">下一步</el-button>
                        </span>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import { getDeptIdAndName } from '../../api/apis/deptment';
import { getStatIdAndName } from '../../api/apis/stat';
import { addEmp } from '../../api/apis/emp';
import { getEmpId } from '../../api/apis/emp';
import { addTry } from '../../api/apis/try';
import { addEmpDetailed } from '../../api/apis/empinfo';

//这里要引入表单验证规则
import valrule from '../../config/validaterule';

export default {
    name: 'depttrandetails',
    data() {
        return {
            activeName: 'first',
            isDisabled1: false,
            empName: '', //员工姓名
            preDeptName: '', //原部门名称
            query: {
                dept: [
                    // { deptid: 1, deptname: '人事部' },
                    // { deptid: 2, deptname: '技术部' },
                    // { deptid: 3, deptname: '培训部' }
                ],
                stat: [
                    // { statid: 1, statname: '管理' },
                    // { statid: 2, statname: '技术' },
                    // { statid: 3, statname: '营销' }
                ]
            },

            //form(基础信息)表单的数据验证
            rules: {
                name: [{ required: true, message: '请输入名字', trigger: 'blur' }], //名字
                sex: [{ required: true, message: '请选择性别', trigger: 'blur' }], //性别，1男0女
                birth: [{ required: true, message: '请选择出生日期', trigger: 'blur' }], //出生年月
                nation: [{ required: true, message: '请输入籍贯', trigger: 'blur' }], //籍贯
                folk: [{ required: true, message: '请输入民族（汉族）', trigger: 'blur' }], //民族
                phone: [{ required: true, trigger: 'blur', validator: valrule.validPhone }], //电话
                email: [{ required: true, trigger: 'blur', validator: valrule.validEmail }], //邮件
                height: [{ required: true, message: '请输入身高', trigger: 'blur' }], //身高
                blood: [{ required: true, message: '请选择血型', trigger: 'blur' }], //血型
                idCard: [{ required: true, trigger: 'blur', validator: valrule.validIdCard }], //身份证号
                deptId: [{ required: true, message: '请选择部门', trigger: 'blur' }], //部门id
                statId: [{ required: true, message: '请输入岗位', trigger: 'blur' }], //岗位id
                empTime: [{ required: true, message: '请选择入职日期', trigger: 'blur' }], //入职日期（雇佣日期）
                workTime: [{ required: true, message: '请选择工作日期', trigger: 'blur' }], //工作日期
                form: [{ required: true, message: '请选择用工形式', trigger: 'blur' }], //用工形式，1正式，0临时
                source: [{ required: true, message: '请选择人员来源', trigger: 'blur' }], //人员来源
                politics: [{ required: true, message: '请选择政治面貌', trigger: 'blur' }], //政治面貌
                status: [{ required: true, message: '请选择婚姻状况', trigger: 'blur' }], //婚姻状况
                edu: [{ required: true, message: '请选择最高学历', trigger: 'blur' }], //最高学历
                graSchool: [{ required: true, message: '请输入毕业院校', trigger: 'blur' }], //毕业院校
                spec: [{ required: true, message: '请输入所学专业', trigger: 'blur' }], //专业
                gradate: [{ required: true, message: '请选择毕业日期', trigger: 'blur' }] //毕业日期
            },

            //基本信息录入表单
            form: {
                empId: null, //员工id
                preDeptId: null, //原部门id
                nowDeptId: 1, //新部门id
                type: 1, //调转类型，1主动2被动0错误
                reason: '', //调转原因
                remark: '' //备注
            }
        };
    },
    created() {
        alert("created")
        this.getParams();
        this.fetchDept(); //获取部门相关信息
        this.fetchStat(); //获取岗位相关信息
    },
    beforeUpdate(){
        
        //alert("beforeUpdate")
    },
    updated(){
        this.getParams();
        //alert("updated")
    },

    methods: {

        getParams(){
            this.preDeptName = this.$route.params.deptName//原部门名称
            this.empName = this.$route.params.empName//员工姓名
            this.form.empId = this.$route.params.empId//员工id
            this.form.preDeptId = this.$route.params.deptId//原部门id
        },
        //获取部门相关信息
        fetchDept() {
            getDeptIdAndName()
                .then((res) => {
                    console.log(res);
                    if (res.state === 200) {
                        this.query.dept = res.list;
                    } else {
                        this.$message.error('部门下拉列表数据获取失败，' + res.msg);
                    }
                })
                .catch(() => {
                    this.$message.error('部门下拉列表数据获取失败，请在保证网络畅通的情况下检查请求的地址是否正确');
                });
        },

        //获取岗位相关信息
        fetchStat() {
            getStatIdAndName()
                .then((res) => {
                    console.log(res);
                    if (res.state === 200) {
                        this.query.stat = res.list;
                    } else {
                        this.$message.error('岗位下拉列表数据获取失败，' + res.msg);
                    }
                })
                .catch(() => {
                    this.$message.error('岗位下拉列表数据获取失败，请在保证网络畅通的情况下检查请求的地址是否正确');
                });
        },

        watch: {
            //监听相同路由下参数变化的时候，从而实现异步刷新
            $route(to, from) {
                alert(to)
                alert(from)
            }
        },
        //信息录入
        onSubmit(form3) {
            this.$refs[form3].validate((valid) => {
                if (valid) {
                } else {
                    this.$message.error('请按照指定格式输入');
                    return false;
                }
            });
        }
    },
    computed: {}
};
</script>

<style>
.message-title {
    cursor: pointer;
}
.handle-row {
    margin-top: 30px;
}
.inputwidth {
    width: 350px;
}
</style>

